<template>
	<el-dialog
		width="1000px"
		:visible.sync="show"
		:close-on-click-modal="false"
		:before-close="handleClose"
		top="3vh"
	>
		<template #title>
			<div class="rp-header">
				<h3 class="dialog-title">{{ opOrigin === '新增' ? '重复试题处理' : '试题重复提示' }}</h3>
			</div>
		</template>

		<div style="padding-top: 0" class="rpsd-content">
			<p class="rp-question-detail-add">
				<b v-if="opText">{{ opText }}</b><b v-else>本次{{ opOrigin }}试题</b>&ensp;
				<el-button
					type="primary"
					plain
					size="mini"
					@click="handleAbandon"
					:loading="isSaving"
					v-if="isShowTool"
				>
					放弃添加
				</el-button>
				<el-button
					type="primary"
					plain
					size="mini"
					@click="handleUpdateBase"
					:loading="isSaving"
					v-if="isShowTool"
				>
					更新已有试题基本信息
				</el-button>						
				<el-tooltip
					class="item"
					effect="dark"
					placement="bottom"
					v-if="isShowTool"
				>
					<ul slot="content" class="update-tip">
						<li>本次新增试题将覆盖已有重复试题，但不影响已有试题的组卷记录和做题记录</li>
						<li>仅更新试题基本信息（题干、选项、答案、解析）</li>
					</ul>
					<i class="el-icon-question" />
				</el-tooltip>
				<el-button
					type="primary"
					plain
					size="mini"
					@click="handleUpdate"
					:loading="isSaving"
					v-if="isShowTool"
				>
					更新已有试题全部信息
				</el-button>						
				<el-tooltip
					class="item"
					effect="dark"
					placement="bottom"
					v-if="isShowTool"
				>
					<ul slot="content" class="update-tip">
						<li>本次新增试题将覆盖已有重复试题，但不影响已有试题的组卷记录和做题记录</li>
						<li>更新试题全部信息（题干、选项、答案、解析、章节、知识点、标签信息）</li>
					</ul>
					<i class="el-icon-question" />
				</el-tooltip>
			</p>
			<div class="question-add-wrapper" v-loading="isLoadingQ">
				<question-show
					v-if="currentQues"
					:data="currentQues"
				/>
			</div>
			<p class="rp-question-detail-repeat"><b>已有重复试题</b></p>
			<div class="question-repeat-wrapper" v-loading="isLoading">
				<question-show
					v-if="currentUpdateQues"
					:data="currentUpdateQues"
				/>
			</div>
		</div>
	</el-dialog>
</template>
<script>
	import QuestionShow from '@rc/pages/components/question-base/question-show/index.vue';
	import questionApi from "@rc/apis/rc/question.mjs";

	export default {
		components:{
        	QuestionShow
    	},
		props: {
			// 弹窗显示
			show: {
				type: Boolean,
				default: false
			},
			isSaving: {
				type: Boolean,
				default: false
			},
			question: {
				type: Object,
				default: () => ({})
			},
			questionResourceId: {
				type: String,
				default: ''
			},
			opOrigin: {
				type: String,
				default: '新增'
			},
			repeatResourceId: {
				type: String,
				default: ''
			},
			isShowTool: {
				type: Boolean,
				default: true
			},
			opText: {
				type: String,
				default: ''
			},
			willShow: {
				type: String,
				default: '',
			},
			willHide: {
				type: String,
				default: '',
			},
			willReplaceQuestion: {
				type: Array,
				default: () => ([])
			},
		},
		/**
		 * 数据模型
		 * 
		 * @returns {object} return 数据模型
		 */
		data() {
			return {
				isLoading: false,
				currentUpdateQues: null,
				currentQuesCache: null,
				isAbandon: false,
				isUpdate: false,
				isLoadingQ: false,
			};
		},
		computed: {
			/**
			 * 当前试题
			 * 
			 *  @returns {object} return 试题
			 */
			currentQues() {
				return this.currentQuesCache || this.question;
			},
		},
		watch: {
			/**
			 * 监听显示状态
			 * 	 
			 * @param {boolean} val 是否显示
			 */
			show(val) {
				if (val) {
					this.handleQuestionClick();
					if (this.questionResourceId) {
						this.getQuestion();
					} else if (this.question) {
						this.$set(this.question, 'isShowChapter', true);
						this.$set(this.question, 'isShowKnowledge', true);
						this.$set(this.question, 'isShowLabel', true);
						if (this.question.smallQuestionList) {
							this.question.smallQuestionListCache = this.question.smallQuestionList;
							this.question.smallQuestionList = this.question.smallQuestionList.filter(({ isAvailable }) => isAvailable === 'Y'); 
							this.question.smallQuestionList.forEach((citem) => {
								this.$set(citem, 'isShowChapter', true);
								this.$set(citem, 'isShowKnowledge', true);
								this.$set(citem, 'isShowLabel', true);
							});
						}
					}
					if (this.willReplaceQuestion) {
						this.willReplaceQuestion.forEach((item) => {
							this.$set(item, 'isShowChapter', true);
							this.$set(item, 'isShowKnowledge', true);
							this.$set(item, 'isShowLabel', true);
						});
					}
				} else if (this.question) {
					delete this.question.isShowChapter;
					delete this.question.isShowKnowledge;
					delete this.question.isShowLabel;
					if (this.question.smallQuestionList) {
						this.question.smallQuestionList.forEach((citem) => {
							delete citem.isShowChapter;
							delete citem.isShowKnowledge;
							delete citem.isShowLabel;
						});
						this.question.smallQuestionList = this.question.smallQuestionListCache;
						delete this.question.smallQuestionListCache;
					}
					if (this.willReplaceQuestion) {
						this.willReplaceQuestion.forEach((item) => {
							delete item.isShowChapter;
							delete item.isShowKnowledge;
							delete item.isShowLabel;
						});
					}
					const dmas = document.querySelectorAll('.rpsd-content audio');
					dmas.forEach((dms) => {
						dms.pause();
					});
					const dmvs = document.querySelectorAll('.rpsd-content video');
					dmvs.forEach((dms) => {
						dms.pause();
					});
				}
			},
		},
        methods: {
            /**
             * 返回
             */
			handleClose(){
               this.$emit("update:show", false);
            },
			/**
			 * 放弃添加
			 */
			handleAbandon() {
				this.handleClose();
				this.$emit('success', 'abandon');
			},
			/**
			 * 更新已有试题
			 */
			handleUpdate() {
				this.$emit('success', 'all');
			},
			/**
			 * 更新已有试题
			 */
			handleUpdateBase() {
				this.$emit('success', 'base');
			},
			/**
			 * 点击处理
			 */
			handleQuestionClick() {
				this.isLoading = true;
				questionApi.queryQuestionInfoV({
					resourceId: this.repeatResourceId
				}).then((resource) => {
					resource.chapterList = resource.chapterNames ? resource.chapterNames.map((item) => {
						return { chapterName: item };
					}): [];
					resource.isShowChapter = true;
					resource.isShowKnowledge = true;
					resource.isShowLabel = true;
					if (resource.smallQuestionList) {
						resource.smallQuestionList = resource.smallQuestionList.filter(({ isAvailable }) => isAvailable === 'Y');
						resource.smallQuestionList.forEach((citem) => {
							citem.chapterList = citem.chapterNames ? citem.chapterNames.map((item) => {
								return { chapterName: item };
							}) : [];
							citem.isShowChapter = true;
							citem.isShowKnowledge = true;
							citem.isShowLabel = true;
						});
					}
					this.currentUpdateQues = resource;
				}).finally(() => {
					this.isLoading = false;
				});
			},
			/**
			 * 获取试题信息
			 */
			getQuestion() {
				this.isLoadingQ = true;
				questionApi.queryQuestionInfoV({
					resourceId: this.questionResourceId
				}).then((resource) => {
					resource.chapterList = resource.chapterNames ? resource.chapterNames.map((item) => {
						return { chapterName: item };
					}): [];
					resource.isShowChapter = true;
					resource.isShowKnowledge = true;
					resource.isShowLabel = true;
					if (resource.smallQuestionList) {
						resource.smallQuestionList = resource.smallQuestionList.filter(({ isAvailable, resourceId }) => {
							if (isAvailable === 'Y') {
								return this.willHide.includes(resourceId) === false;
							} else {
								return this.willShow.includes(resourceId);
							}
						});
						resource.smallQuestionList.forEach((citem) => {
							citem.chapterList = citem.chapterNames ? citem.chapterNames.map((item) => {
								return { chapterName: item };
							}) : [];
							citem.isShowChapter = true;
							citem.isShowKnowledge = true;
							citem.isShowLabel = true;
						});
						if (this.willReplaceQuestion) {
							this.willReplaceQuestion.forEach((item) => {
								const idx = resource.smallQuestionList.findIndex(({ resourceId }) => resourceId === item.resourceId);
								if (idx >= 0) {
									resource.smallQuestionList.splice(idx, 1, item);
								}
							});
						}
					}
					this.currentQuesCache = resource;
				}).finally(() => {
					this.isLoadingQ = false;
				});
			},
        }
	};
</script>
<style scoped lang="less">
	/deep/ .el-dialog__body {
		padding: 20px 20px;
	}
	.dialog-title {
		text-align: center;
		font-size: 16px;
		color: #333;
	}
	.rp-header {
		position: relative;
	}
	.rp-question-detail-add {
		color: #333;
	}
	.rp-question-detail-repeat {
		color: #333;
	}

	.question-add-wrapper {
		border: rgba(215, 215, 215, 1) 1px solid;
		min-height: 300px;
		margin-bottom: 15px;
		margin-top: 15px;
		padding: 15px;
		max-height: 30vh;
    	overflow: auto;
	}

	.question-repeat-wrapper {
		border: rgba(215, 215, 215, 1) 1px solid;
		min-height: 300px;
		margin-bottom: 15px;
		margin-top: 15px;
		padding: 15px;
		max-height: 30vh;
    	overflow: auto;
	}
	.update-tip {
		list-style-type: decimal;
		padding-left: 10px;
	}
</style>
